import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const pulldownStyle = style({
	borderRadius: vars.layout.smallRadius,
	border: `1px solid ${vars.color.border}`,
	display: 'flex',
	position: 'relative',
	overflowX: 'hidden',
	overflowY: 'auto',
	flexDirection: 'column',
	flex: 1,
	height: '400px',
	selectors: {
		'&.refreshing': {
			pointerEvents: 'none',
		},
	},
});

globalStyle(`${pulldownStyle}>div.info`, {
	position: 'absolute',
	backgroundColor: vars.color.disabledText,
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	overflow: 'hidden',
	left: '-10px',
	right: '-10px',
	top: '-0',
	height: '0',
	boxShadow: `0px 0px 6px 0px ${vars.color.shadow} inset`,
});
globalStyle(`${pulldownStyle}>div.anchor`, {
	height: '1px',
	opacity: '0',
	zIndex: '-1',
	flexShrink: 0,
});

globalStyle(`${pulldownStyle}>div.info svg`, {
	width: '2rem',
	height: '2rem',
	transition: 'transform 0.2s',
	fill: vars.color.secondaryText,
	stroke: vars.color.secondaryText,
});

globalStyle(`${pulldownStyle}>div.info svg.ready`, {
	transform: 'rotate(-180deg)',
});

globalStyle(`${pulldownStyle}>div.content`, {
	flex: '1',
	display: 'flex',
	flexDirection: 'column',
});

globalStyle(`${pulldownStyle}>div.content>*`, {
	flex: '1',
	border: 'none',
});
